<template>
  <div class="main-container-app">
    <el-row class="form-contain" >
      <payment-form @handleQueryPayment="handleQueryPayment"></payment-form>
    </el-row>
    <div class="table-contain">
    <payment-table :searchList="paymentRes" :listLoadingPayment="loading"
                   @handleCurrentChangePayment="handleCurrentChangePayment"
                   @handleSizeChangePayment="handleSizeChangePayment"></payment-table>
    </div>
  </div>
</template>

<script>
  /* eslint-disable */
  import PaymentForm from './paymentChild/paymentForm'
  import PaymentTable from './paymentChild/paymentTable'
  import {fetchListPayment} from '@/api/operating/elePaySta'
  export default {
    components: {
      PaymentTable,
      PaymentForm
    },
    data() {
      return {
        paymentRes: null,
        loading: false,
        queryData: {
          rangeTime: [new Date(), new Date()],
        },
        listQuery: {
          page: 1,
          limit: 20
        }
      }
    },
    methods: {
      handleQueryPayment(val) {
        this.queryData = val
        this.listQuery.page=1
        this.listQuery.limit=20
        this.getDataListPayment()
      },
      handleSizeChangePayment(val) {
        this.listQuery.limit = val
        this.listQuery.page = 1
        this.getDataListPayment()
      },
      handleCurrentChangePayment(val) {
        this.listQuery.page = val
        this.getDataListPayment()
      },
      getDataListPayment() {
        this.loading = true
        fetchListPayment(this.listQuery, this.queryData).then(res => {
          this.paymentRes = res
          console.log(res)
          this.loading = false
        },
        err=>{
          this.loading = false
        })
      }

    }
  }

</script>

<style scoped>
  .payment {
    padding: 32px;
    background-color: rgb(240, 242, 245);
  }
</style>
